<template>
	<el-container>
		<el-aside width="200px" v-loading="showGrouploading">
			<el-container>
				<el-header>
					<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
				</el-header>
				<el-main class="nopadding">
					<el-tree ref="fileFolder" class="menu" node-key="folderId" :data="fileFolderList"
							 :props="groupsProps" :current-node-key="''" :highlight-current="true"
							 :expand-on-click-node="false"
							 :filter-node-method="groupFilterNode" @node-click="groupClick">
						<template #default="{node, data}">
							<span class="custom-tree-node">
								<span class="label">{{ node.label }}</span>
								<span class="code">{{ data.code }}</span>
							</span>
						</template>

					</el-tree>
				</el-main>
			</el-container>
		</el-aside>
		<el-container style="overflow: hidden;">
			<el-header>
				<div class="left-panel">
					<span style="font-weight: 600;font-size: 18px">{{
							(folderName != '' ? '《' + folderName + '》' : '')
						}}</span>
				</div>
				<div class="right-panel">
					<el-button @click="goBack" :disabled="this.historyIndex==0" icon="el-icon-caret-left"
							   title="后退"></el-button>
					<el-button @click="goNext" :disabled="this.historyIndex==this.historyRecord.length"
							   icon="el-icon-caret-right" title="前进"></el-button>
					<el-button @click="searchFile" icon="el-icon-search" title="查询"></el-button>
				</div>
			</el-header>
			<el-container @contextmenu.prevent="openMenu('folderContextmenu',$event)">
				<el-card shadow="never" style="width:100%;height: 100%;overflow: auto;">
					<el-alert v-if="this.folderId==''" title="请选择目录查看文件" type="warning"
							  style="margin-bottom:20px;"></el-alert>
					<el-col v-if="childFolderList.length==0&&fileList.length==0">
						<el-empty description="目录下没有文件" :image-size="100"></el-empty>
					</el-col>
					<el-row :gutter="15">
						<el-col style="padding: 10px;margin: 5px" :xl="3" :lg="3" :md="4" :sm="6" :xs="24"
								v-for="item in childFolderList" :key="item.fileId"
								@dblclick="openFolder(item)"
								@click="showFileInfo(item)"
								@contextmenu.prevent.stop="openMenu('folderOtherContextmenu',$event,item)"
								:title="item.fileName">
							<div style="text-align: center;">
								<el-icon style="font-size: 40px;">
									<el-icon-folder-opened/>
								</el-icon>
							</div>
							<div
								style="text-align: center;font-size: 16px;font-weight: 600;text-overflow: ellipsis;width: 100%;overflow: hidden;white-space: nowrap;">
								{{ item.fileName }}
							</div>
						</el-col>
						<el-col style="padding: 10px;margin: 5px" :xl="3" :lg="3" :md="4" :sm="6" :xs="24"
								v-for="item in fileList" :key="item.fileId"
								@click="showFileInfo(item)"
								@contextmenu.prevent.stop="openMenu('fileContextmenu',$event,item)"
								@dblclick="preview(item)" :title="item.remark">
							<div style="text-align: center;">
								<el-icon style="font-size: 40px;" :title="(item.fileSize/(1024*1024)).toFixed(2)+`MB`">
									<component :is="getFileTypeIcon(item.extName)"/>
								</el-icon>
							</div>
							<div
								style="text-align: center;font-size: 16px;font-weight: 600;text-overflow: ellipsis;width: 100%;overflow: hidden;white-space: nowrap;">
								<span :title="item.fileName">{{ item.fileName }}</span>
							</div>
						</el-col>
					</el-row>
				</el-card>
			</el-container>
		</el-container>
		<el-aside>
			<el-container>
				<el-header style="text-align: center;font-size: 18px;font-weight: 600;display: unset;line-height: 30px">文档详情
				</el-header>
				<el-main style="background: white">
					<el-form-item label="文件名称:">
						{{ fileInfo.fileName }}
					</el-form-item>
					<el-form-item label="文件大小:" v-if="fileInfo.isFile!=='false'">
						{{ (fileInfo.fileSize / (1024 * 1024)).toFixed(2) + `MB` }}
					</el-form-item>
					<el-form-item label="文档格式:" v-if="fileInfo.isFile!=='false'">
						{{ fileInfo.extName }}
					</el-form-item>
					<el-form-item label="文档版本:" v-if="fileInfo.isFile!=='false'">
						{{ fileInfo.version }}
					</el-form-item>
					<el-form-item label="创建人:">
						{{ fileInfo.createUserName }}
					</el-form-item>
					<el-form-item label="创建时间:">
						{{ fileInfo.createTime }}
					</el-form-item>
					<el-form-item label="备注说明:" v-if="fileInfo.isFile!=='false'">
						{{ fileInfo.remark }}
					</el-form-item>
				</el-main>
			</el-container>
		</el-aside>
	</el-container>
	<sc-contextmenu ref="fileContextmenu" @command="handleCommand">
		<sc-contextmenu-item v-if="folderRole.manageRole" command="copy" title="复制"
							 icon="el-icon-document-copy"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.manageRole" command="shear" title="剪切"
							 icon="el-icon-scissor"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.manageRole" command="delete" title="删除"
							 icon="el-icon-delete"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.manageRole" command="edit" title="编辑"
							 icon="el-icon-edit"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.manageRole" command="update" title="修改"
							 icon="el-icon-edit-pen"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.manageRole" command="rename" title="重命名"
							 icon="el-icon-finished"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.manageRole" command="version" title="历史版本"
							 icon="el-icon-expand"></sc-contextmenu-item>
		<sc-contextmenu-item command="read" title="查看" icon="el-icon-search"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.downRole" command="down" title="下载"
							 icon="el-icon-download"></sc-contextmenu-item>
		<sc-contextmenu-item command="preview" title="预览" icon="el-icon-view"></sc-contextmenu-item>
	</sc-contextmenu>

	<sc-contextmenu ref="folderOtherContextmenu" @command="handleCommand">
		<sc-contextmenu-item command="openFolder" title="打开" icon="el-icon-plus"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.manageRole" command="copyFolder" title="复制"
							 icon="el-icon-document-copy"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.manageRole" command="shearFolder" title="剪切"
							 icon="el-icon-scissor"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.manageRole" command="deleteFolder" title="删除"
							 icon="el-icon-folder-checked"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.manageRole" command="renameFolder" title="重命名"
							 icon="el-icon-finished"></sc-contextmenu-item>
	</sc-contextmenu>

	<sc-contextmenu ref="folderContextmenu" @command="handleCommand">
		<sc-contextmenu-item v-if="folderRole.createRole" command="createFile" title="新建文件"
							 icon="el-icon-plus"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.createRole" command="createFolder" title="新建文件夹"
							 icon="el-icon-edit"></sc-contextmenu-item>
		<sc-contextmenu-item v-if="folderRole.manageRole" command="paste" title="粘贴" icon="el-icon-folder-checked"
							 :disabled="this.optId==''"></sc-contextmenu-item>
	</sc-contextmenu>
	<file-dialog v-if="dialog.save" :folder-id="this.folderId" ref="fileDialog" @success="handleSaveSuccess"
				 @closed="dialog.save=false"></file-dialog>
	<attach-version v-if="dialog.versionSave" :attach-id="this.fileItem.attachId" ref="fileVersionDialog"
					@closed="dialog.versionSave=false"></attach-version>
	<search-dialog v-if="dialog.searchSave" ref="searchDialog" @success="doSearchFile"
				   @closed="dialog.searchSave=false"></search-dialog>
</template>
<script>
import iconSelect from "@/config/iconSelect"
import publicFilUtils from './publieFileUtils'
import attachUtils from "@/utils/attachUtils";
import scContextmenu from '@/components/scContextmenu'
import scContextmenuItem from '@/components/scContextmenu/item'
import fileDialog from "./fileDialog";
import AttachVersion from "@/views/module/attachVersion";
import searchDialog from "@/views/file/public/searchDialog";

export default {
	name: 'Public File',
	mixins: [publicFilUtils, attachUtils],
	components: {
		AttachVersion,
		fileDialog,
		scContextmenu,
		scContextmenuItem,
		searchDialog
	},
	data() {
		return {
			dialog: {
				save: false,
				versionSave: false,
				searchSave: false
			},
			fileType: "",
			optType: "",
			optId: "",
			folderRole: {},
			childFolderList: [],
			historyRecord: [],
			historyIndex: 0,
			fileList: [],
			fileItem: {},
			fileInfo: {
				fileSize: 0,
			},
			folderId: '',
			openFolderId: '',
			openFolderName: '',
			openParentId: '',
			folderName: '',
			showGrouploading: false,
			groupFilterText: '',
			fileFolderList: [],
			groupsProps: {
				label: "folderName",
				value: "folderId"
			},
			rules: {}
		}
	},
	watch: {
		groupFilterText(val) {
			this.$refs.fileFolder.filter(val);
		},
	},
	mounted() {
		this.getPublicFileFolderGroup()
		this.$nextTick(function () {
			//获取传递的参数
			this.openFolderId = this.$route.params.openFolderId != null ? this.$route.params.openFolderId : '';
			this.openFolderName = this.$route.params.folderName != null ? this.$route.params.openFolderName : '';
			this.openParentId = this.$route.params.openParentId != null ? this.$route.params.openParentId : '';
			if (this.openParentId != '') {
				let item = {
					folderId: this.openFolderId,
					folderName: this.openFolderName,
					parentId: this.openParentId
				}
				this.groupClick(item)
			}
		})
	},
	methods: {
		showFileInfo(item) {
			this.fileInfo = item;
		},
		searchFile() {
			this.dialog.searchSave = true
			this.$nextTick(() => {
				this.$refs.searchDialog.open()
			})
		},
		async doSearchFile(data) {
			if (this.folderId == '') {
				this.$alert('请先选择文件夹', "提示", {type: 'error'})
				return false;
			}
			let params = data;
			params.folderId = this.folderId;
			var res = await this.$API.file.publicFile.getPublicFileList.get(params);
			if (res.code == 200) {
				this.childFolderList = res.data.folderList;
				this.fileList = res.data.fileList;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
			this.getPublicFolderRoleInfo(this.folderId);
		},
		goBack() {
			if (this.historyIndex > 0) {
				this.historyIndex = this.historyIndex - 1;
				var item = this.historyRecord[this.historyIndex];
				this.folderId = item.sourceFolderId;
				this.folderName = item.sourceFolderName;
				this.getPublicFileList(item.sourceFolderId);
				this.getPublicFolderRoleInfo(item.sourceFolderId);
			}
		},
		goNext() {
			if (this.historyIndex < this.historyRecord.length) {
				var item = this.historyRecord[this.historyIndex];
				this.historyIndex = this.historyIndex + 1;
				this.folderId = item.folderId;
				this.folderName = item.folderName;
				this.getPublicFileList(item.folderId);
				this.getPublicFolderRoleInfo(item.folderId);
			}
		},
		//加载树数据
		async getPublicFileFolderGroup() {
			this.showGrouploading = true;
			var res = await this.$API.file.publicFile.getMyPublicFolderInRole.get();
			this.showGrouploading = false;
			this.fileFolderList = res.data;
		},
		//树过滤
		groupFilterNode(value, data) {
			if (!value) return true;
			return data.folderName.indexOf(value) !== -1;
		},
		//树点击事件
		groupClick(data) {
			var sourceFolderId = this.folderId;
			var sourceFolderName = this.folderName;
			this.historyIndex = this.historyIndex + 1;
			this.folderId = data.folderId
			this.folderName = data.folderName;
			this.historyRecord.push({
				sourceFolderId: sourceFolderId,
				sourceFolderName: sourceFolderName,
				folderId: this.folderId,
				folderName: this.folderName
			});
			this.getPublicFileList(data.folderId);
			this.getPublicFolderRoleInfo(data.folderId);
		},
		openFolder(item) {
			var sourceFolderId = this.folderId;
			var sourceFolderName = this.folderName;
			this.historyIndex = this.historyIndex + 1;
			this.folderId = item.fileId;
			this.folderName = item.fileName;
			this.fileItem = item;
			this.historyRecord.push({
				sourceFolderId: sourceFolderId,
				sourceFolderName: sourceFolderName,
				folderId: this.folderId,
				folderName: this.folderName
			});
			this.getPublicFileList(item.fileId);
			this.getPublicFolderRoleInfo(item.fileId);
		},
		async handleCommand(command) {
			if (command === "createFile") {
				this.dialog.save = true
				this.$nextTick(() => {
					this.$refs.fileDialog.open("add")
				})
			} else if (command === "createFolder") {
				this.$prompt('请输文件夹新名称', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputErrorMessage: '新文件夹名称不能为空'
				}).then(({value}) => {
					if (!value) {
						this.$alert('新文件夹名称不能为空', "提示", {type: 'error'})
					} else {
						this.createFolder(this.folderId, value)
					}
				}).catch(() => {
				})
			} else if (command === "edit") {
				this.openFileOnLine(this.fileItem.extName, this.fileItem.attachId, 4);
			} else if (command === "read") {
				this.openFileOnLine(this.fileItem.extName, this.fileItem.attachId, 1);
			} else if (command === "version") {
				this.dialog.versionSave = true
				this.$nextTick(() => {
					this.$refs.fileVersionDialog.open(this.fileItem.attachId)
				})
			} else if (command === "shear") {
				this.fileType = "file";
				this.optType = "1";
				this.optId = this.fileItem.fileId;
				this.$message.success("剪切成功,请选择粘贴位置");
			} else if (command === "shearFolder") {
				this.fileType = "folder";
				this.optType = "1";
				this.optId = this.fileItem.fileId;
				this.$message.success("剪切成功,请选择粘贴位置");
			} else if (command === "copy") {
				this.fileType = "file";
				this.optType = "2";
				this.optId = this.fileItem.fileId;
				this.$message.success("拷贝成功,请选择粘贴位置");
			} else if (command === "copyFolder") {
				this.fileType = "folder";
				this.optType = "2";
				this.optId = this.fileItem.fileId;
				this.$message.success("拷贝成功,请选择粘贴位置");
			} else if (command === "paste") {
				this.paste(this.fileType, this.optType, this.optId, this.folderId);
			} else if (command === "delete") {
				this.$confirm(`确定删除选中的《` + this.fileItem.fileName + `》文件吗？`, '提示', {
					type: 'warning'
				}).then(async () => {
					const loading = this.$loading();
					this.delete(this.fileItem);
					loading.close();
				}).catch(() => {
				})
			} else if (command === "deleteFolder") {
				this.$confirm(`确定删除选中的《` + this.fileItem.fileName + `》目录吗？如果删除项中含有子集将会被一并删除`, '提示', {
					type: 'warning'
				}).then(async () => {
					const loading = this.$loading();
					this.deleteFolder(this.fileItem);
					loading.close();
				}).catch(() => {
				})
			} else if (command === "openFolder") {
				this.folderId = this.fileItem.fileId;
				this.folderName = this.fileItem.fileName;
				this.getPublicFileList(this.fileItem.fileId);
				this.getPublicFolderRoleInfo(this.fileItem.fileId);
			} else if (command === "preview") {
				this.preview(this.fileItem)
			} else if (command === "down") {
				this.down(this.fileItem)
			} else if (command === "renameFolder") {
				this.$prompt('请输文件夹新名称', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputErrorMessage: '新文件夹名称不能为空'
				}).then(({value}) => {
					if (!value) {
						this.$alert('新文件夹名称不能为空', "提示", {type: 'error'})
					} else {
						this.renameFolder(this.fileItem, value)
					}
				}).catch(() => {
				})
			} else if (command === "rename") {
				this.$prompt('请输文件新名称', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputErrorMessage: '新文件名称不能为空'
				}).then(({value}) => {
					if (!value) {
						this.$alert('新文件名称不能为空', "提示", {type: 'error'})
					} else {
						this.rename(this.fileItem, value)
					}
				}).catch(() => {
				})
			} else if (command === "update") {
				this.dialog.save = true
				this.$nextTick(() => {
					this.$refs.fileDialog.open("edit").setData(this.fileItem)
				})
			}
		},
		openMenu(menu, e, item) {
			this.$refs.folderContextmenu.closeMenu();
			this.$refs.folderOtherContextmenu.closeMenu();
			this.$refs.fileContextmenu.closeMenu();
			this.fileItem = item;
			this.$refs[menu].openMenu(e);
		},
		async getPublicFileList(folderId) {
			var res = await this.$API.file.publicFile.getPublicFileList.get({folderId: folderId, createTime: ['', '']});
			if (res.code == 200) {
				this.childFolderList = res.data.folderList;
				this.fileList = res.data.fileList;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async getPublicFolderRoleInfo(folderId) {
			var res = await this.$API.file.publicFile.getPublicFolderRoleInfo.get({folderId: folderId});
			if (res.code == 200) {
				this.folderRole = res.data;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		getFileTypeIcon(extName) {
			var iconName = "sc-icon-" + extName.substr(1, extName.length);
			if (iconSelect.icons[1].icons.indexOf(iconName) !== -1) {
				return iconName;
			} else {
				return 'sc-icon-unknown-file';
			}
		},
		handleSaveSuccess() {
			this.getPublicFileFolderGroup();
			this.getPublicFileList(this.folderId);
			this.getPublicFolderRoleInfo(this.folderId);
		}
	}
}
</script>
<style scoped>
.custom-tree-node {
	/*display: flex;*/
	flex: 1;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 24px;
	height: 100%;
}

.custom-tree-node .code {
	font-size: 12px;
	color: #999;
}

.custom-tree-node .do {
	margin-left: 10px;
	display: none;
}

.custom-tree-node:hover .code {
	display: none;
}

.custom-tree-node:hover .do {
	margin-left: 10px;
	display: inline-block;
}
</style>
